<!-- 设置页面 set -->
<template>
  <div class="container-set">
    <van-nav-bar title="设置" left-arrow border @click-left="onClickLeft"></van-nav-bar>
    <van-cell title="个人信息" is-link to="Modify"/>
    <div class="line"></div>
    <van-cell title="使用说明" is-link to="note"/>
    <div class="line"></div>
    <van-cell title="清除缓存" :value="cache" @click="onClearCache"/>
    <van-button type="danger" @click="onExit">退出登陆</van-button>
  </div>
</template>

<script type='textecmascript-6'>
export default {
  data() {
    return {
      cache: 0
    };
  },
  created() {
    this.caches()
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1);
    },
    onExit() {
      localStorage.clear()
      sessionStorage.clear()
      this.$router.push({ path: "../login" });
    },
    onClearCache() {
      console.log("清理缓存");
      this.$dialog.confirm({
        title: '提示',
        message: '是否确定清空缓存？',
        className:'set'
      }).then(() => {
        sessionStorage.clear()
        this.cache = 0
      })
    },
    caches() {
      let totalLength = 0;
      Object.keys(sessionStorage).forEach(i => {
        totalLength += sessionStorage[i].length;
      });
      console.log(totalLength/1024)
      if(totalLength/1024<1){
        this.cache = totalLength + 'B';
      }else if(totalLength/1024>=1&&totalLength/1024/1024<1){
        this.cache = (totalLength/1024).toFixed(2) + 'M';
      }else if(totalLength/1024/1024>=1&&totalLength/1024/1024/1024<1){
        this.cache = (totalLength/1024/1024).toFixed(2) + 'G';
      }else{
        this.cache = 0
      }
    }
  }
};
</script>
<style lang='stylus' scoped rel='stylesheet/stylus'>
@import './user_assets/base.css'

.container-set
  width 100%
  height 100%
  background rgba(246, 248, 250, 1)
  .line
    margin 0 0.4rem 0 0.32rem
    height 0.027rem
    background-color #E5E5E5
  .van-cell
    height 1.17rem
    background rgba(255, 255, 255, 1)
    font-size 30px
    font-family SourceHanSansCN-Regular
    font-weight 400
    color rgba(51, 51, 51, 1)
    align-items center
    padding 0 0.4rem 0 0.32rem
  .van-button
    display block
    height 1.17rem
    width 9.34rem
    color rgba(255, 255, 255, 1)
    background rgba(229, 75, 75, 1)
    border-radius 0.11rem
    font-size 30px
    font-family SourceHanSansCN-Medium
    font-weight 500
    margin-top 1.2rem
    margin-left 0.32rem
</style>
<style>
.set{
  width: 70%;
  font-size: 36px;
  line-height: 60px;
}
.set .van-dialog__message--has-title{
  font-size: 32px;
}
.set .van-button--large{
  font-size: 32px;
  line-height: 80px;
  height: initial;
}
</style>
